<template>
  <div class="rank">
    <h1>选择书籍排序信息</h1>
    <input type="button" value="排序" @click="rank">
    <select id="rankbar">
      <option value="1" selected>价格从高到低</option>
      <option value="2">价格从低到高</option>
      <option value="3">销量从高到低</option>
      <option value="4">销量从低到高</option>
      <option value="5">名字从高到低</option>
      <option value="6">名字从低到高</option>
    </select>
    <div class="rankinfo">

    </div>
  </div>
</template>

<script>

    export default {
        name: "rank.vue",
        methods:{
          rank(){
            var rankb = document.getElementById('rankbar');
            var ranktype = rankb.options[rankb.selectedIndex].value;
            alert(ranktype);
            this.show();
          },
          show(){

          },

        }
    }
</script>

<style scoped>
  #rankbar{
    width: 200px;
  }

</style>
